<template>
	<view class="gold-tab">
		<u-tabs :list="tabs" :is-scroll="false" active-color="#000" :current="current" @change="change"></u-tabs>


		<view class="item" v-for="i in list[current].data" :key="i.id" @click="goto(i.trade_no)">
			<view class="flex-row justify-between align-center padding-sm">
				<view class="flex-row align-center">
					<image :src="`../../static/images/cpt${i.company_type}.png`" style="width: 62rpx;height: 32rpx;"></image>
					<view class="company u-line-1">{{i.company_type==1?i.company:'个人类型'}}</view>
				</view>
				<view class="date">{{i.created_at}}</view>
			</view>

			<view class="flex-row align-center padding-sm u-line-1">
				<view class="name">{{i.name}}{{i.sex==1?'(先生)':'(女士)'}}</view>
				<view class="mobile">{{i.mobile}}</view>
			</view>
			
			<view class="padding-lr-sm padding-bottom-sm content u-line-1">{{i.content}}</view>
		</view>

		<view class="padding-tb">
			<u-loadmore :status="list[current].status" bg-color="transparent"></u-loadmore>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				tabs: [{
						name: '未受理'
					},
					{
						name: '已受理'
					}
				],
				current: 0,
				list: [{
					type: 0,
					page: 1,
					data: [],
					status: 'loadmore'
				}, {
					type: 1,
					page: 1,
					data: [],
					status: 'loadmore'
				}]
			};
		},
		onLoad(opt) {
			this.type = opt.type
			this.getData()
		},
		onPullDownRefresh() {
			this.getData(true)
		},
		onReachBottom() {
			this.getData()
		},
		methods: {
			change(index) {
				this.current = index;
				this.getData(true);
			},
			getData(clear = false) {
				let target = this.list[this.current]
				if (clear) {
					target.page = 1
					target.data = []
					target.status = 'loadmore'
				}
				if (target.status == 'nomore') return;

				// 获取数据
				target.status = 'loading'
				this.$u.get('/category/appointment/record/' + this.type, {
					status: target.type,
					page: target.page
				}).then(res => {
					let {
						data,
						last_page
					} = res.data.result.record
					target.data = [...target.data, ...data]
					uni.stopPullDownRefresh()
					if (target.page == last_page) {
						target.status = 'nomore'
					} else {
						target.status = 'loadmore'
						target.page++
					}
				})
			},
			goto(no) {
				no && this.$goto('/pages/order/detail?no='+no)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}

	.item {
		width: 750rpx;
		height: 223rpx;
		background: rgba(255, 255, 255, 1);
		margin: 16rpx auto;
		letter-spacing: 2rpx;
		
		.company {
			margin-left: 16rpx;
			font-size:28rpx;
			font-family:HelveticaNeue;
			color:rgba(51,51,51,1);
			width: 380rpx;
		}
		
		.date {
			font-size:24rpx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(153,153,153,1);
			letter-spacing: 0;
		}
		
		.name, .mobile {
			font-size:32rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
			color:rgba(51,51,51,1);
			margin-right: 16rpx;
		}
		
		.content {
			font-size:24rpx;
			font-family:HelveticaNeue;
			color:rgba(153,153,153,1);
		}
	}
</style>
